<script>
 export default {
   props: {
     msg: {
       type: Object,
       default: {
         id:0,
         text:'',
         incoming: false,
         timestamp: ''
       }
     },
   },
   methods: {
     formatText(txt) {
       txt = txt+''
       return txt.replace(/\n/gm , '<br/>')
     },
   }
 }
</script>

<template>
  <div v-if="!msg.incoming" class="flex px-2 mt-2">
    <div class="text-[0.8em] rounded flex mr-1 w-full">
      <div class="bg-green-400 p-2 rounded max-w-[50%] break-all ml-auto" v-html="formatText(msg.text)"></div>
      <div class="w-[5px]">
        <div class="mt-2 arrow-right"></div>
      </div>
    </div>
    <img src="../assets/images/appicon.png" alt="" class="w-[40px] h-[40px]">
  </div>

  <div v-if="msg.incoming" class="flex px-2 mt-2">
    <img src="../assets/images/appicon.png" alt="" class="w-[40px] h-[40px]">
    <div class="text-[0.8em] rounded flex ml-1 w-full">
      <div class="w-[5px]">
        <div class="mt-2 arrow-left"></div>
      </div>
      <div class="bg-white p-2 rounded max-w-[50%] break-all" v-html="formatText(msg.text)"></div>
    </div>
  </div>
</template>

<style scoped>

</style>